<template>
    <IContent :spinShow="loading">
        <ISearch v-model="search">
            <Row>
                <FormItem label="拦截状态">
                    <RadioGroup v-model="search.intercept_status" type="button" size="small">
                        <Radio label="">全部</Radio>
                        <Radio label="0">无拦截</Radio>
                        <Radio label="1">有拦截</Radio>
                    </RadioGroup>
                </FormItem>
            </Row>
            <Row>
                <FormItem label="订单状态">
                    <RadioGroup v-model="search.status" type="button" size="small">
                        <Radio label="">全部</Radio>
                        <Radio label="-1">取消</Radio>
                        <Radio label="0">草稿</Radio>
                        <Radio label="1">确认</Radio>
                        <Radio label="2">异常</Radio>
                        <Radio label="3">清关中</Radio>
                        <Radio label="4">待发货</Radio>
                        <Radio label="5">已发货</Radio>
                    </RadioGroup>
                </FormItem>
            </Row>
            <Row>
                <FormItem label="清关状态 ">
                    <RadioGroup v-model="search.customs_status" type="button" size="small">
                        <Radio label="">全部</Radio>
                        <Radio label="0">待发送</Radio>
                        <Radio label="1">已发送</Radio>
                        <Radio label="2">海关接收</Radio>
                        <Radio label="100">海关退单</Radio>
                        <Radio label="300">人工审核</Radio>
                        <Radio label="399">海关审结</Radio>
                        <Radio label="800">放行</Radio>
                        <Radio label="899">结关</Radio>
                        <Radio label="500">查验</Radio>
                        <Radio label="501">扣留移送通关</Radio>
                        <Radio label="502">扣留移送缉私</Radio>
                        <Radio label="503">扣留移送法规</Radio>
                        <Radio label="599">其它扣留</Radio>
                        <Radio label="700">退运</Radio>
                    </RadioGroup>
                </FormItem>
            </Row>
            <FormItem label="订单号">
                <Input size="small" v-model="search.number" :rows="1"></Input>
            </FormItem>
            <FormItem label="仓单号">
                <Input size="small" v-model="search.code" :rows="1"></Input>
            </FormItem>
            <FormItem label="客户名称">
                <RemoteSelect url="common/select/customer" v-model="search.customer_id" size="small"></RemoteSelect>
            </FormItem>
            <FormItem :label-width="1">
                <Button type="primary" icon="ios-search" @click="getLists(1)" size="small">搜索</Button>
                <Button type="success" icon="ios-add" @click="openComponent('ICreate')" size="small">添加</Button>
            </FormItem>
        </ISearch>
        <ITable :current="page.current" :table="table" :total="page.total" @on-page-change="pageChange">
            <template slot-scope="{ row, index }" slot="customer">
                <span>{{row.customer.name}}:{{row.customer.code}}</span>
            </template>
            <template slot-scope="{ row, index }" slot="express">
                <span v-if="row.express_code === null">{{row.express.name}}</span>
                <Poptip v-else trigger="hover" title="物流单号" :content="row.express_code" transfer>
                    <span>{{row.express.name}}</span>
                </Poptip>
            </template>
            <template slot-scope="{ row, index }" slot="intercept_status">
                <span v-if="row.intercept_status === 0">否</span>
                <span v-if="row.intercept_status === 1">是</span>
            </template>
            <template slot-scope="{ row, index }" slot="status">
                <span v-if="row.status === -1">取消</span>
                <span v-if="row.status === 0">草稿</span>
                <span v-if="row.status === 1">确认</span>
                <span v-if="row.status === 2">异常</span>
                <span v-if="row.status === 3">清关中</span>
                <span v-if="row.status === 4">待发货</span>
                <span v-if="row.status === 5">已发货</span>
            </template>
            <template slot-scope="{ row, index }" slot="customs_status">
                <span v-if="row.customs === null">待发送</span>
                <Poptip v-else trigger="hover" title="清关内容" :content="row.customs.info" transfer>
                    <span v-if="row.customs.status === `0`">待发送</span>
                    <span v-if="row.customs.status === `1`">已发送</span>
                    <span v-if="row.customs.status === `2`">海关接收</span>
                    <span v-if="row.customs.status === `100`">海关退单</span>
                    <span v-if="row.customs.status === `300`">人工审核</span>
                    <span v-if="row.customs.status === `399`">海关审结</span>
                    <span v-if="row.customs.status === `800`">放行</span>
                    <span v-if="row.customs.status === `899`">结关</span>
                    <span v-if="row.customs.status === `500`">查验</span>
                    <span v-if="row.customs.status === `501`">扣留移送通关</span>
                    <span v-if="row.customs.status === `502`">扣留移送缉私</span>
                    <span v-if="row.customs.status === `503`">扣留移送法规</span>
                    <span v-if="row.customs.status === `599`">其它扣留</span>
                    <span v-if="row.customs.status === `700`">退运</span>
                </Poptip>
            </template>

            <template slot-scope="{ row, index }" slot="action">
                <Button size="small" v-if="row.status === 0" @click="openComponent('IUpdate', {id: row.id})">编辑</Button>
                <PoptipButton v-if="row.status === 0" size="small" content="清关清关清关去了！~"
                              @on-ok="submitForConfirm(row.id)">确认
                </PoptipButton>
            </template>
        </ITable>

        <component v-if="componentProps.value" :is="componentProps.view" v-model="componentProps.value"
                   :props="componentProps.props"
                   @input="getLists(page.current)"></component>
    </IContent>
</template>

<script>
    import contentListPage from "../../../mixins/contentListPage";
    import IContent from "../../../components/content/index";
    import ISearch from "../../../components/content/search";
    import ITable from "../../../components/content/table";
    import contentDrawer from "../../../mixins/contentDrawer";
    import IUpdate from "./update"
    import ICreate from "./create"
    import RemoteSelect from "../../../components/form/remoteSelect";
    import PoptipButton from "../../../components/content/poptipButton";

    export default {
        name: "index",
        components: {PoptipButton, RemoteSelect, ITable, ISearch, IContent, IUpdate, ICreate},
        mixins: [contentListPage, contentDrawer],
        data() {
            return {
                table: {
                    columns: [
                        {
                            title: '客户代码',
                            slot: 'customer',
                            width: 120
                        }, {
                            title: '仓单号',
                            key: 'code',
                            width: 165
                        }, {
                            title: '订单号',
                            key: 'number',
                            minWidth: 250
                        }, {
                            title: '快递信息',
                            slot: 'express',
                            width: 150
                        }, {
                            title: '电商平台',
                            key: 'ebp_name',
                            width: 250
                        }, {
                            title: '订购人',
                            key: 'buyer_name',
                            width: 100
                        }, {
                            title: '收货人',
                            key: 'receiving_name',
                            width: 100
                        }, {
                            title: '状态',
                            slot: 'status',
                            width: 100
                        }, {
                            title: '清关状态',
                            slot: 'customs_status',
                            width: 100
                        }, {
                            title: '是否拦截',
                            slot: 'intercept_status',
                            width: 85
                        }, {
                            title: '操作',
                            slot: 'action',
                            minWidth: 150
                        }
                    ]
                },
                search: {}
            }
        },
        methods: {
            getLists(page) {
                this.loading = true;
                this.$http.get(`order/index`, {
                    params: Object.assign({}, this.search, {page: page})
                }).then((data) => {
                    this.table.data = data.data
                    this.page.total = data.total
                    this.page.current = data.current_page
                }).finally(() => {
                    this.loading = false;
                });
            },
            submitForConfirm(id) {
                this.loading = true;
                this.$http.put(`order/index/${id}/confirm`).then(() => {
                    this.getLists(this.page.current);
                }).finally(() => {
                    this.loading = false;
                })
            },
        }
    }
</script>

<style scoped>

</style>
